<template>
  <el-form :inline="true">
    <el-form-item label="一级分类" style="width: 30%;">
      <el-select v-model="CategoryStore.c1Id" @change="handlerGetC2" :disabled="scene!=0">
        <!--option:label是显示的文字，value属性是select下拉收集的数据-->
        <el-option v-for="(c1) in CategoryStore.c1Arr" :key="c1.id" :label="c1.name" :value="c1.id"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="二级分类" style="width: 30%">
      <el-select v-model="CategoryStore.c2Id" @change="handlerGetC3" :disabled="scene!=0">
        <el-option v-for="(c2) in CategoryStore.c2Arr" :key="c2.id" :label="c2.name" :value="c2.id"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="三级分类" style="width: 30%">
      <el-select v-model="CategoryStore.c3Id" :disabled="scene!=0">
        <el-option v-for="(c3) in CategoryStore.c3Arr" :key="c3.id" :label="c3.name" :value="c3.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import {onMounted} from "vue";
//引入分类仓库
//@ts-ignore
import useCategoryStore from "@/piniaStore/moudules/categoryStore.ts";


let CategoryStore = useCategoryStore();

//组件挂载完毕,通知仓库获取数据
onMounted(() => CategoryStore.getC1())//通知仓库去拿数据)

const handlerGetC2 = () => {
  CategoryStore.c2Id = null;
  CategoryStore.c3Id = null;
  CategoryStore.c3Arr = [];
  CategoryStore.getC2()
}

const handlerGetC3 = () => {
  CategoryStore.c3Id = null;
  CategoryStore.getC3();
}

//接受父组件穿的值scene
defineProps(['scene'])


</script>

<style scoped>

</style>